import React, {useState, useEffect} from 'react';
import { Button, Form, Input, Select } from 'antd';
import style from './RegisterForm.module.scss';
import PropTypes from 'prop-types';
import api from '../../api/index';

const { Option } = Select;

const RegisterForm = (props) => {
    const { onFinish, btnText, userData } = props;
    const [cities, setCities] = useState([]);
    const [townLoading, setTownLoading] = useState(false);
    const [curRoleId, setCurRoleId] = useState('');

    const [form] = Form.useForm();

    useEffect(() => {
        // 获取行政区划
        setTownLoading(true);
        const params = {
            code: '330225000000'
        };

        api.search.queryAdmin(params)
            .then(res => {
                const {code, data = []} = res.data;
                if(code === 200) {
                    const adminData = generateAdminData(data);
                    setCities(adminData);
                }
            }).catch(err => {
                console.log(err);
            }).finally(() => {
                setTownLoading(false);
            })
    },[]);

    useEffect(() => {
        const length = Object.keys(userData).length;
        if(length > 0) {
            const {userName = '', password = '', roleId = '', szxz = ''} = userData;
            form.setFieldsValue({
                userName,
                password,
                roleId: String(roleId),
                szxz
            });
            roleId && setCurRoleId(String(roleId));
        }
        
    }, [userData]);

    // 组织行政区划数据
    const generateAdminData = (datas) => {
        const adminData = datas.map(data => {
            const {name} = data;
            return {
                label: name,
                value: name
            }
        });
        return adminData;
    };

    // 乡镇数据options
    const getCityOptions = cities.map(city => {
        return <Option value={city.value} key={city.value}>{city.label}</Option>
    });

    const handleChange = (value) => {
        setCurRoleId(value);
    };

    return (
        <Form
            className={style.registerForm}
            form={form}
            layout="vertical"
            onFinish={onFinish}
            requiredMark={false}
        >
            <Form.Item
                name="userName"
                label="用户名"
                rules={[
                    {
                        required: true,
                        message: '请输入用户名！',
                        whitespace: false,
                    },
                ]}
            >
                <Input className={style.input} placeholder="请输入" autoComplete="off" />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[
                    {
                        required: true,
                        message: '请输入密码！',
                        whitespace: false,
                    },
                ]}
            >
                <Input.Password
                    className={style.input}
                    placeholder="请输入"
                    autoComplete="new-password"
                />
            </Form.Item>

            <Form.Item
                name="roleId"
                label="角色"
                rules={[
                    {
                        required: true,
                        message: '请选择角色!',
                    },
                ]}
            >
                <Select
                    placeholder="请选择"
                    className={style.input}
                    onChange={handleChange}
                    dropdownClassName={style.statusSelectDrop}
                >
                    <Option value="1">管理员</Option>
                    <Option value="2">审核员</Option>
                    <Option value="3">普通人员</Option>
                </Select>
            </Form.Item>
            {
                curRoleId === '3' && 
                <Form.Item
                    name="szxz"
                    label="地区"
                    rules={[
                        {
                            required: true,
                            message: '请选择地区!',
                        },
                    ]}
                >
                    <Select placeholder="请选择"
                        className={style.input}
                        loading={townLoading}
                        dropdownClassName={style.statusSelectDrop}>
                        {getCityOptions}
                    </Select>
                </Form.Item>
            }
            <Form.Item>
                <Button type="text" htmlType="submit" className={style.btn}>
                    {btnText}
                </Button>
            </Form.Item>
        </Form>
    );
};

RegisterForm.propTypes = {
    onFinish: PropTypes.func,
    btnText: PropTypes.string,
};

export default RegisterForm;
